<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<h3 id="tit">标题3</h3>
<div class="wrap">
    <div class="box">box 1</div>
    <div class="box">box 2</div>
    <div class="box">box 3</div>
</div>
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

<script>

// document.querySelector(css选择器)返回第一个匹配的元素
// var title = document.querySelector('#tit');
// var box1 = document.querySelector('.box');
// var li1 = document.querySelector('.list li');
// console.log( title );// <h3 id="tit">标题3</h3>
// console.log( box1 );// <div class="box">box 1</div>
// console.log( li1 );// <li>li 1</li>

// document.querySelectorAll(css选择器)返回所有匹配的元素
// var boxs = document.querySelectorAll('.box');
// var lis = document.querySelectorAll('.list li');
// console.log( boxs );// NodeList(3) [div.box, div.box, div.box]
// console.log( lis );// NodeList(3) [li, li, li]
// console.log( boxs[0] );// <div class="box">box 1</div>
// console.log( boxs.length );// 3 表示集合中元素的个数

</script>
</body>
</html>